<template>
  <div class="app-container">
    <!-- 主体 start -->
    <el-container>
      <el-main height>
        <div>
          <el-row>
            <el-col :span="8" :offset="0">
              <el-form label-width="100px">
                <el-form-item label="币种名称">
                  <el-input
                    v-model="search.CurrencyName"
                    placeholder="请输入币种名称"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
                <el-form-item size="large">
                  <el-button type="primary" @click="seacrhBtn">查 询</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
        <!-- 表格 start -->
        <el-table
          border
          :data="list.List"
          v-loading="loading"
          style="width: 100%; margin-top: 30px"
        >
          <el-table-column
            align="center"
            prop="Currency"
            label="币种"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="Unit"
            label="单位"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="State"
            label="是否显示"
            width="150px"
          >
            <template slot-scope="scope">
              <el-switch
                style="display: block"
                v-model="scope.row.State"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="是"
                inactive-text="否"
                @change="updataUserState(scope.row, $event)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="Sort"
            label="排序吗"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="Remarks"
            label="备注"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="CreateTime"
            label="创建时间"
          ></el-table-column>
          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="showPupop(scope.row)"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 20px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="search.CurrentPage"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="search.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="list.TotalCount"
          ></el-pagination>
        </div>
        <!-- 表格 end -->
      </el-main>
    </el-container>
    <!-- 主体 end -->
    <!-- 查看弹窗 start -->
    <el-dialog
      title="查看"
      :visible.sync="pupopState"
      :close-on-click-modal="false"
      class="edit-form"
    >
      <el-form label-width="100px">
        <el-form-item label="币种名称">
          <el-input
            v-model="row.Currency"
            placeholder="请输入币种名称"
            clearable
            :disabled="true"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="单位">
          <el-input
            v-model="row.Unit"
            placeholder="请输入单位"
            clearable
            :disabled="true"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="row.State"
            active-text="是"
            inactive-text="否"
            active-color="#67C23A"
            inactive-color="#F56C6C"
          ></el-switch>
        </el-form-item>
        <el-form-item label="排序码">
          <el-input
            v-model="row.Sort"
            placeholder="请输入排序码"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="row.Remarks"
            type="textarea"
            :disabled="true"
            placeholder="请输入备注"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pupopState = false">关 闭</el-button>
        <el-button type="primary" @click="config">确 认</el-button>
      </span>
    </el-dialog>
    <!-- 查看弹窗 end -->
  </div>
</template>

<script>
import { GetCurrencyList, UpdateCurrency } from "../../api/type";
export default {
  data() {
    return {
      //表格参数
      loading: true,
      list: [],
      search: {
        CurrentPage: 1,
        pageSize: 10,
        CurrencyName: "",
      },
      //弹窗参数
      pupopState: false,
      row: {},
    };
  },
  watch: {},
  created() {
    this.getList();
  },
  methods: {
    seacrhBtn() {
      this.search.CurrentPage = 1;
      this.getList();
    },
    //获取用户数据
    getList() {
      this.loading = true;
      GetCurrencyList(this.search).then((res) => {
        if (res.Code == 200) {
          this.list = res.Data;
          this.loading = false;
        }
      });
    },
    //确认修改
    config() {
      const upData = {
        id: this.row.Id,
        state: this.row.State,
        sort: this.row.Sort,
      };
      UpdateCurrency(upData).then((res) => {
        if (res.Code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.pupopState = false;
          this.getList();
        }
      });
    },
    //修改状态
    updataUserState(row, data) {
      const title = data ? "已显示" : "已隐藏";
      const upData = {
        id: row.Id,
        state: row.State,
      };
      UpdateCurrency(upData).then((res) => {
        if (res.Code == 200) {
          this.$message({
            message: title,
            type: "success",
          });
        }
      });
    },
    //弹窗
    showPupop(row) {
      this.row = row;
      this.pupopState = true;
    },
    handleSizeChange(val) {
      this.search.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.search.CurrentPage = val;
      this.getList();
    },
  },
};
</script>
<style>
.box {
  border: 1px solid #ccc;
  padding: 10px 0;
  margin-top: 20px;
}
.title {
  font-weight: bold;
  margin-left: 20px;
  font-size: 20px;
  padding: 20px 0;
}
</style>
